<template>
	<view class="content">
		<view class="content_box" v-for="(item,index) of message_arr" :key="index">
			<view v-if="item.type == 0">
			<view class="message0">
					<view class="">
						欢迎{{item.msg.user_message}}
					</view>
					<view class="">
						{{item.time}}
					</view>
				</view>
			</view>
			<view :class="[item.msg.user_Name == user_Name ? 'user2':'user']" v-if="item.type == 2">
				<view class="user_info">
					<view class="user_name">
						{{item.msg.user_Name}}
					</view>
					
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="message1" style="width: fit-content;" >
					{{item.msg.user_message}}
				</view>
			</view>
		
		</view>
		<view class="Send_message">
			<input type="text" v-model="send_message_input" />
			<view class="Send_message_btn" @click="Send_message">
				发送
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				socket: '',
				send_message_input: '',
				//用户名是随机的
				user_Name: '',
				message_arr: [],
				send_object: {
					// 0表示第一次连接 1表示正常消息
					state: 0,
					user_Name: '',
					user_message: ''
				}
			}
		},
		onLoad() {
			this.user_Name = this.randomString(6)
			this.socket = new WebSocket('ws://localhost:3000');
			this.socket.addEventListener('open', () => {
				console.log('连接成功')
				this.send_object.user_Name = this.user_Name
				this.socket.send(JSON.stringify(this.send_object))
			})
			this.socket.addEventListener('message', (e) => {
				//  let value = input.value
				console.log('我接收到了返回的数据')
				console.log(e.data)
				this.message_arr.push(JSON.parse(e.data))
			})
		},
		methods: {
			//发送消息
			Send_message() {
				if (this.send_message_input == '') {
					return
				} else {
					this.send_object.user_message = this.send_message_input
					this.send_object.state = 2
					this.socket.send(JSON.stringify(this.send_object))
					this.send_message_input = ''
					console.log('发送成功')
				}

			},
			//生成随机用户名
			randomString(e) {
				e = e || 32;
				var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
					a = t.length,
					n = "";
				for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
				return n
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}

	.Send_message {
		background: #f0f0f0;
		height: 100upx;
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 15upx;
		display: flex;
		align-items: center;

		input {
			flex: 2;
			background: #fff;
			height: 80upx;
			margin: 0 10upx;
			padding-left: 20upx;
		}

		.Send_message_btn {
			flex: 0.5;
			background: #409EFF;
			text-align: center;
			color: #fff;
			height: 70upx;
			line-height: 70upx;
			border-radius: 5px;
			font-size: 30upx;
		}
	}

	.message0 {
		width: 50%;
		// display: inline-block;
		margin: 0 auto;
		font-size: 25rpx;
		text-align: center;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 3px;
		border-radius: 5px;

	}
   .content_box{
	   margin-top: 10px;
	       display: flex;
	       width: 100%;
	       flex-direction: column;
   }
	

	// .message1::before {
	// 	content: '';
	// 	position: absolute;
	// 	top: 50%;
	// 	left: -5px;
	// 	width: 10px;
	// 	height: 10px;
	// 	margin-top: -10upx;
	// 	background: inherit;
	// 	/*自动继承父元素的背景*/
	// 	transform: rotate(45deg);
	// }

	.add_btn {
		idth: 80%;
		background: #366cb3;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
		border-radius: 20rpx;
		position: fixed;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		bottom: 70rpx;

	}
	.user{
		margin-left: 15rpx;
		display: flex;
		align-items: center;
		
		.user_name{
			font-size: 20rpx;
			margin-bottom: 10px;
		}
		image{
		 height: 60rpx;
		 width: 60rpx;
		 border-radius: 50%;
		}
		.message1 {
			float: left;
			height: 30px;
			margin-left: 10px;
			background-color: #fff;
			border-bottom-color: skyblue;
			/*为了给after伪元素自动继承*/
			color: #333;
			font-size: 12px;
			line-height: 18px;
			padding: 5px 12px 5px 12px;
			box-sizing: border-box;
			border-radius: 6px;
			position: relative;
			word-break: break-all;
			&::before {
				content: '';
				position: absolute;
				top: 50%;
				left: -5px;
				width: 10px;
				height: 10px;
				margin-top: -10upx;
				background: inherit;
				/*自动继承父元素的背景*/
				transform: rotate(45deg);
			}
			
		}
	}
	.user2{
		flex-direction: row-reverse;
		margin-right: 15rpx;
		display: flex;
		align-items: center;
		.user_name{
			font-size: 20rpx;
			margin-bottom: 10px;
		}
		image{
		 height: 60rpx;
		 width: 60rpx;
		 border-radius: 50%;
		}
		.message1 {
			float: left;
			height: 30px;
			margin-right: 10px;
			background-color: #9eea6a;
			border-bottom-color: skyblue;
			/*为了给after伪元素自动继承*/
			color: #333;
			font-size: 12px;
			line-height: 18px;
			padding: 5px 12px 5px 12px;
			box-sizing: border-box;
			border-radius: 6px;
			position: relative;
			word-break: break-all;
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				right: -5px;
				width: 10px;
				height: 10px;
				margin-top: -10upx;
				background: inherit;
				/*自动继承父元素的背景*/
				transform: rotate(45deg);
			}
		}
	}
</style>
